<template>
  <div>
    <input
      placeholder="输入关键字搜索"
      v-model.trim="name"
      @keyup.enter="search"
    />
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in records" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.doctor }}</td>
          <td>{{ item.diagnosis }}</td>
          <td>{{ item.prescription }}</td>
          <td><button @click="fn(item.doctor)">详情</button></td>
        </tr>
      </tbody>
    </table>
    <!-- @写的是在接收孩子传过来的值 :说明是在给孩子传值 -->
    <MyDetails v-if="flag" @my-exit="exit" :res="res"> </MyDetails>
  </div>
</template>

<script>
import MyDetails from "@/components/MyDetails.vue";
export default {
  components: {
    MyDetails,
  },
  props: {
    records: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      name: "",
      flag: false,
      // res数组接收当前点击的是哪个信息
      // 最后会把res传给details 详情会显示在details
      res: [],
    };
  },
  methods: {
    search() {
      // 子传父  孩子把输入的医生名字传给父亲
      this.$emit("my-search", this.name);
      this.name = "";
    },
    fn(doctor) {
      this.res = this.records.filter((item) => item.doctor === doctor);
      console.log(this.res);
      this.flag = true;
    },


    // 关闭按钮在details里 点击关闭按钮
    //  details把值传给table  table接收
    // 在exit方法里改变flag的值 控制details是否显示
    exit() {
      this.flag = false;
    },
  },
};
</script>

<style scoped>
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.my-table td,
.my-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>